<template>
  <div class='u-goodsDialog'>
    <el-dialog ref='dialog'
      title="商品信息"
      :visible.sync="dialogVisible"
      :before-close="closeDialog"
    >
      <el-form :inline='true' label-width='120'>
        <el-form-item label='商品名称：'>
          <span @click='showSkuDialog'>{{ data.name ? (`${data.name}${data.title ? ('-' + data.title) : ''}`) : '选择商品' }}</span>
        </el-form-item>
        <el-form-item label='进货单价：'>
          <el-input v-model.trim='data.price' type='number' />
        </el-form-item>
      </el-form>
      <a-table :data='data.aMats' :cols='tableKeys'>
        <el-table-column align="center" label="操作" width='180' slot='ahead'>
          <template slot-scope="scope">
            <div>
              <!-- <el-button size='mini' @click='openEdit(scope.$index)'>修改</el-button> -->
              <el-button size='mini' @click='removeItem(scope.$index)'>删除</el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="串码" minWidth='120'>
          <template slot-scope="scope">
            <div>
              <!-- <span @click='openEdit(scope.$index)' v-show='!scope.row.isEdit'>{{ scope.row.code }}</span> -->
              <el-input  v-model='scope.row.code' />
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="备注" minWidth='180'>
          <template slot-scope="scope">
            <div>
              <!-- <span @click='openEdit(scope.$index)' v-show='!scope.row.isEdit'>{{ scope.row.memo || '暂无' }}</span> -->
              <div>
                <div  style="display: flex;align-items: center;justify-content: center;">
                  <el-input style='margin-right: 10px;' v-model='scope.row.memo' />
                  <!-- <i class='el-icon-check' @click='updateMemo(scope.$index)'></i> -->
                  <i class='el-icon-close' @click='cancelEdit(scope.$index)'></i>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
      </a-table>
      <div style='margin-top: 15px;'>
        <el-button @click='addMat'>添加串码</el-button>
        <el-button type='primary' @click='add'>保存</el-button>
        <el-button type='primary' @click='closeDialog'>取消</el-button>
      </div>
    </el-dialog>
    <sku-dialog ref='skuDialog' @getData='getData' :selectSkuIds='selectSkuIds' />
  </div>
</template>

<script>
import skuDialog from './skuDialog'

export default {
  name: 'u-goodsSelectListDialog',

  props: ['selectSkuIds', 'id', 'isAddOrder'],

  components: {
    skuDialog
  },

  data() {
    return {
      dialogVisible: false,
      data: {
        id: '',
        aMats: [],
        price: ''
      },
      tableKeys: [],
      isAdd: true,
      selectIndex: -1
    }
  },

  methods: {
    $show(type, index) {
      this.isAdd = type !== 'edit'
      if (this.isAdd) {
        this.data = {}
        this.$refs.skuDialog.clearCache()
      }
      this.selectIndex = this.isAdd ? -1 : index
      this.dialogVisible = true
    },

    reset() {},

    showSkuDialog(type, index) {
      this.$refs.skuDialog.$show()
    },

    removeItem(i) {
      this.data.aMats.splice(i, 1)
    },

    updateMemo(i) {
      this.data.aMats[i].memo = this.data.aMats[i].cacheMemo
      this.data.aMats[i].code = this.data.aMats[i].cacheCode
      this.data.aMats[i].isEdit = false
    },

    cancelEdit(i) {
      this.data.aMats[i].isEdit = false
    },

    openEdit(i) {
      this.data.aMats[i].isEdit = true
    },

    emitData() {
      const data = {}
      this.$emit('update', data)
    },

    async add() {
      // 检查是否有价格，是否有商品，商品是否有串码
      let msg = ''
      if (!this.data.price) {
        msg = '请输入价格'
      } else if (!this.data.id) {
        msg = '请添加商品'
      } else if (this.data.aMats.some(v => !v.code)) {
        msg = '请填写商品的串码'
      }
      if (msg) {
        return this.__notify('警告', msg, 'warning')
      }
      if (this.isAddOrder) {
        this.$emit('getData', JSON.parse(JSON.stringify(this.data)), this.isAdd ? 'add' : this.selectIndex)
        this.dialogVisible = false
        this.data = {}
      } else {
        const code = await this.requestSave()
        if (code === 0) {
          this.dialogVisible = false
          this.data = {}
          this.$emit('update')
        }
      }
    },

    set(data) {
      // 拼装商品数据
      this.data = JSON.parse(JSON.stringify(data))
      // 设置 skuDialog 的 cacheObj
      this.$refs.skuDialog.setCache(this.data)
    },

    getData(data) {
      if (data.id === this.data.id) return false
      this.data = {
        ...data,
        aMats: []
      }
    },

    addMat() {
      if (!this.data.id) return false
      this.data.aMats.push({
        code: '',
        cacheCode: '',
        isEdit: false,
        memo: '',
        cacheMemo: ''
      })
      this.openEdit(this.data.aMats.length - 1)
    },

    async requestSave() {
      const params = {
        aId: this.id,
        aSkuId: this.data.sku_id,
        aPrice: this.data.price,
        aMats: this.data.aMats.map(v2 => ({
          aId: v2.code,
          aMemo: v2.memo
        }))
      }
      const { code } = await this.$api.firm_inventory_setBuyingBillSku(params)
      if (code === 0) {
        this.__notify('提示', '操作成功')
      }
      return code
    },

    closeDialog() {
      if (this.data.aMats || this.data.price || this.data.sku_id) {
        this.__messageBox({
          msg: '提示',
          title: '是否要关闭该窗口',
          msgType: 'info',
          successCallback: () => {
            this.dialogVisible = false
          }
        })
      } else {
        this.dialogVisible = false
      }
    }
  }
}
</script>

<style lang='less'>

</style>